<template>
	<view class="container">
		<view>
			<monthly-title class="logo" title="日常生活记录"></monthly-title>
			<view class="body">
				<u-image
					v-if="false"
					shape="circle"
					width="353" 
					height="353"
					:src="currentValue.recordImage"></u-image>
				<view v-else class="upload-hint">
					<text>请上传图片</text>
					<text>点击左下角“编辑”</text>
				</view>
				<u-image class="bg" width="478rpx" height="404rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_two_3.png"></u-image>
			</view>
		</view>
		
		<view class="content">
			<text class="title">饮食</text>
			<text class="desc">每天正餐{{currentValue.dietCount}}次</text>
			<text class="desc">每次以{{currentValue.diet}}为主，每次食量{{currentValue.dietAmount}}</text>
			<text class="desc">另外添加副食品，宝宝喜欢吃</text>
			
			<text class="title">睡眠</text>
		 	<text class="desc">宝宝白天在小象湾睡{{currentValue.sleepCount}}次</text>
			<text class="desc">每次睡眠时间为{{currentValue.sleepAvg}}分钟</text>
			<text class="desc">宝宝在金职托育通睡得：</text>
			<text class="desc">宝宝睡眠质量好</text>
		</view>
		
		<view class="image-content">
			<u-image
			    v-for="item in displayedItems"
				shape="square"
				width="320" 
				height="250"
				:key="item"
				:src="item"></u-image>
		</view>
		
		<cover-view v-if="type === 'create'" class="edit" @click="editClick">
			<cover-view>编辑</cover-view>
		</cover-view>
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<scroll-view scroll-y="true" style="max-height: 800rpx;">
					<u-form :model="form" ref="uForm" label-width="200">
						<u-form-item label="正餐次数"><u-input v-model="form.dietCount"/></u-form-item>
						<u-form-item label="主要食物"><u-input v-model="form.diet"/></u-form-item>
						<u-form-item label="食量"><u-input v-model="form.dietAmount"/></u-form-item>
						<u-form-item label="睡眠次数"><u-input v-model="form.sleepCount"/></u-form-item>
						<u-form-item label="睡眠时间"><u-input v-model="form.sleepAvg"/></u-form-item>
						<u-form-item label="照片" :border-bottom="false">
							<x-upload
								ref="uUpload"
								:form-data="formData"
								@onUploaded="onUploaded"
								@onRemove="onRemove"
								:hasVideo="false"
							/>
							<view class="phone-box" @click="onGradeUploaded">
								<u-icon size="50" name="photo-fill"></u-icon>
								<text>选择班级相册</text>
							</view>
						</u-form-item>
					</u-form>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="actionClick">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MonthlyTitle from './monthly-title.vue'
	import XUpload from '@/components/x-upload'
	import { getPhotoAlbum } from '@/api/evaluate.js'
	export default {
		components: {
			MonthlyTitle,
			XUpload
		},
		props: {
			type: {
				type: String,
				default () {
					return 'create'
				}
			},
			value: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		computed: {
			currentValue: {
			  get () {
				return this.value
			  },
			  set (val) {
				  this.$emit('input', val)
			  }
			},
			imageCreat() {
				return this.currentValue.recordImage 
				  ? this.currentValue.recordImage.split("|")
				  : [];
			}
		},
		data() {
			return {
				show: false,
				form: {},
				
				formData: {
					'bizType': 'monthly'
				},
		      displayedItems: [],
		      currentIndex: 0,
		      itemsPerPage: 4,
			  fileList:[],
			}
		},
		created() {
			this.form = { ...this.currentValue }
			this.loadClick()
			const that = this
			uni.$on("imgFLag", function (res) {
			  // that.$refs.uUpload.fileList.push(...res.data.split('|').map(url => ({ url:url,response:{code:000000} }))) ;
			  that.$refs.uUpload.fileList.push(
				...res.data.split("|").map(url => ({
				  url: url,
				  response: { code: "000000", data: url } // 使用 0 而不是 000000
				}))
			  )
			})
		},
		mounted() {
		},
		methods: {
			onRemove(data) {
				console.log(data); 
				this.displayedItems = data.resourceUrl 
				  ? data.resourceUrl.split("|")
				  : [];
				this.loadClick()
			},
			beforeUpload() {
				 return false;
			},
			loadClick() {
			   const res = this.form.recordImage
				  ? this.form.recordImage.split("|")
				  : [];
				if (this.currentIndex >= res.length) {
				  return true; // 返回 true 表示没有更多数据
				}

				const nextItems = res.slice(this.currentIndex, this.currentIndex + this.itemsPerPage);
				this.displayedItems = nextItems;
				this.currentIndex += this.itemsPerPage; // 更新索引，下一页
				return false; // 返回 false 表示还有数据
			
			},
			actionClick() {
				this.$refs.uUpload.upload();
			},
			
			onUploaded(data) {
				this.form.recordImage = data.resourceUrl;

				this.currentValue = { ...this.form };
				this.show = false;
				this.loadClick()
			
			},
			async onGradeUploaded() {
				getPhotoAlbum(this.$parent.childrenId).then((res) => {
					this.$u.route({
						url: 'pages_operate/album/album-photo-page',
						params: {
							albumId: res.data.id,
							type: true
						}
					})
					
				})
				

			},
			  prevClick() {
				// 检查是否可以返回上一页
				if (this.currentIndex <= 0) {
				  return true; // 返回 true 表示已经在第一页，无法再返回
				}

				// 计算新的索引
				const newIndex = this.currentIndex - this.itemsPerPage;
				if (newIndex < 0) {
				  this.currentIndex = 0; // 如果新的索引小于 0，重置为 0
				  this.displayedItems = []; // 没有数据可显示
				  return true; // 返回 true 表示没有上一页的数据
				} else {
				  this.currentIndex = newIndex; // 更新索引到上一页
				}

				const res = this.form.recordImage
				  ? this.form.recordImage.split("|")
				  : [];
				
				// 截取上一页的数据
				const prevItems = res.slice(this.currentIndex, this.currentIndex + this.itemsPerPage);
				
				this.displayedItems = prevItems; // 更新显示的项
				return false; // 返回 false 表示还有数据
			  },
			
			editClick() {
				this.show = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.phone-box {
		    width: 200rpx;
		    background: #f4f5f6;
		    margin-left: 10rpx;
		    height: 200rpx;
		    display: flex;
		    justify-content: center;
			flex-direction: column;
			align-items: center;
		    border: 1rpx solid #e8e8e8;
			
	}
	.edit{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		width: 88rpx;
		height: 88rpx;
		// background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
		background: #F5AC3C;
		border: 3rpx solid rgba(255,255,255,0.3);
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(164,164,164,0.2);
		border-radius: 50%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.popup{
		padding: 30rpx;
	}
	
	.container{
		height: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/yb_three_1.png');

		.content{
			position: absolute;
			top: 471rpx;
			left: 30rpx;
			display: flex;
			flex-direction: column;
			.title{
				margin-top: 20rpx;
				color: #333333;
				font-weight: bold;
				font-size: 24rpx;
			}
			
			.desc{
				color: #333333;
				font-size: 24rpx;
			}
		}
		
		.logo{
			position: absolute;
			left: 27rpx;
			top: 0rpx;
		}
		.body{
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 30rpx;
			top: 115rpx;
			width: 478rpx;
			height: 404rpx;
			
			.bg{
				position: absolute;
				top: 0rpx;
				left: 0rpx;
			}
		}
	}
	
	.upload-hint{
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.image-content{
		position: absolute;
		top: 818rpx;
	    left: 34rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 35rpx;
		
	}
	
</style>